<!DOCTYPE html>
<html id="extr-page">
<head>
    <meta charset="utf-8">
    <title>FrameWork Login</title>
    <meta name="description" content="framework login page">
    <meta name="author" content="zeyuphoenix">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- #CSS Links -->
    <!-- Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/font-awesome.css">

    <!-- SmartAdmin Styles : Caution! DO NOT change the order -->
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/smartadmin-production-plugins.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/smartadmin-production.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/smartadmin-skins.css">

    <!-- SmartAdmin RTL Support -->
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/smartadmin-rtl.css">

    <!-- We recommend you use "your_style.css" to override SmartAdmin
         specific styles this will also ensure you retrain your customization with each SmartAdmin update.-->
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/your_style.css">

    <!-- #FAVICONS -->
    <link rel="shortcut icon" href="/static/img/favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/static/img/favicon/favicon.ico" type="image/x-icon">

    <!-- #GOOGLE FONT -->
    <link rel="stylesheet" href="/static/css/google-fonts.css?family=Open+Sans:300,400,600&subset=latin,latin-ext">

    <!-- #APP SCREEN / ICONS -->
    <!-- Specifying a Webpage Icon for Web Clip
         Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
    <link rel="apple-touch-icon" href="/static/img/splash/sptouch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/static/img/splash/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/static/img/splash/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/static/img/splash/touch-icon-ipad-retina.png">

    <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="/static/img/splash/ipad-landscape.png"
          media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="/static/img/splash/ipad-portrait.png"
          media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="/static/img/splash/iphone.png"
          media="screen and (max-device-width: 320px)">

</head>

<body class="animated fadeInDown">

<header id="header">

    <div id="logo-group">
        <span id="logo"> <img src="/static/img/logo.png" alt="SmartAdmin"> </span>
    </div>

    <span id="extr-page-header-space"> <span class="hidden-mobile hidden-xs">Need an account?</span> <a
            href="${ctx}/register" class="btn btn-danger">Create account</a> </span>

</header>

<div id="main" role="main">

    <!-- MAIN CONTENT -->
    <div id="content" class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8 hidden-xs hidden-sm">
                <h1 class="txt-color-red login-header-big">SmartAdmin</h1>

                <div class="hero">

                    <div class="pull-left login-desc-box-l">
                        <h4 class="paragraph-header">It's Okay to be Smart. Experience the simplicity of SmartAdmin,
                            everywhere you go!</h4>

                        <div class="login-app-icons">
                            <a href="javascript:void(0);" class="btn btn-danger btn-sm">Frontend Template</a>
                            <a href="javascript:void(0);" class="btn btn-danger btn-sm">Find out more</a>
                        </div>
                    </div>

                    <img src="/static/img/demo/iphoneview.png" class="pull-right display-image" alt=""
                         style="width:210px">

                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <h5 class="about-heading">About SmartAdmin - Are you up to date?</h5>

                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                            laudantium, totam rem aperiam, eaque ipsa.
                        </p>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <h5 class="about-heading">Not just your average template!</h5>

                        <p>
                            Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
                            nobis est eligendi voluptatem accusantium!
                        </p>
                    </div>
                </div>

            </div>
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
                <div class="well no-padding">
                    <form action="${ctx}/login" method="post" id="login-form" class="smart-form client-form">
                        <header>
                            Sign In
                        </header>

                        <fieldset>

                            <section>
                                <label class="label">Username</label>
                                <label class="input"> <i class="icon-append fa fa-user"></i>
                                    <input type="text" name="username" value="admin" placeholder="Username">
                                    <b class="tooltip tooltip-top-right"><i class="fa fa-user txt-color-teal"></i>
                                        Please enter your username</b></label>
                            </section>

                            <section>
                                <label class="label">Password</label>
                                <label class="input login-page"> <i class="icon-append fa fa-lock"></i>
                                    <input type="password" name="password" placeholder="Password">
                                    <b class="tooltip tooltip-top-right"><i class="fa fa-lock txt-color-teal"></i> Enter
                                        your password</b> </label>

                                <div class="note">
                                    <a href="${ctx}/forgotpassword">Forgot password?</a>
                                </div>
                            </section>

                            <!--: if (isValidateCodeLogin!false) { -->
                            <section>
                                <label class="label">Validation</label>
                                <#validateCode name="validateCode"/>
                                <div class="note">
                                    <a href="#">Click picture refresh!</a>
                                </div>
                            </section>
                            <!--: } -->

                            <section>
                                <label class="checkbox">
                                    <input type="checkbox" name="rememberMe">
                                    <i></i>Stay signed in</label>
                            </section>
                            <section>
                                <div class="text-center">
                                    <!--:
                                        // 首先验证后端返回消息
                                        // 后端消息存在多个地方产生，不好翻译问题.
                                        var error = message!'';
                                        // var error = shiroLoginFailure!'';
                                     -->
                                    <div id="messageBox"
                                         class="alert alert-dismissable alert-danger ${(error == null || error == '' ? 'hide' : '')}">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <span id="loginError" class="alert-danger">
                                            <!--:
                                                var retInfo = "";
                                                if (error == null || error == "") {
                                                    retInfo = "";
                                                } else {
                                                    /**
                                                    if (error == "com.zeyu.framework.modules.security.CaptchaException") {
                                                        retInfo = "Validate code is error, please retry.";
                                                    } else {
                                                        retInfo = "Username or password is error, please retry.";
                                                    }
                                                    */
                                                    retInfo = error;
                                                }
                                            -->
                                            ${retInfo}
                                        </span>
                                    </div>
                                </div>
                            </section>
                        </fieldset>
                        <footer>
                            <button id="login" type="submit" class="btn btn-primary">
                                Sign in
                            </button>
                        </footer>
                    </form>

                </div>

                <h5 class="text-center"> - Or sign in using -</h5>

                <ul class="list-inline text-center">
                    <li>
                        <a href="javascript:void(0);" rel="tooltip" data-placement="top"
                           data-original-title="Weixin Account Login" data-type="weixin"
                           class="btn btn-primary btn-circle openid-login"><i class="fa fa-weixin"></i></a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" rel="tooltip" data-placement="top"
                           data-original-title="QQ Account Login" data-type="qq"
                           class="btn btn-info btn-circle openid-login"><i class="fa fa-qq"></i></a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" rel="tooltip" data-placement="top"
                           data-original-title="Weibo Account Login" data-type="weibo"
                           class="btn btn-warning btn-circle openid-login"><i class="fa fa-weibo"></i></a>
                    </li>
                    <li>
                        <div class="plugin-toolbar">
                            <a href="javascript:void(0);" rel="tooltip" data-placement="top"
                               data-original-title="More"
                               data-toggle="dropdown" class="btn btn-success btn-circle dropdown-toggle"><i
                                    class="fa fa-list-ul"></i></a>
                            <ul class="dropdown-menu arrow-box-up plugin-select">
                                <li>
                                    <span rel="tooltip" data-placement="top"
                                          data-original-title="Google">
                                     <a href="javascript:void(0);" data-type="google"
                                        class="btn bg-color-greenLight btn-circle openid-login"><i
                                             class="fa fa-google"></i></a>
                                    </span>
                                </li>
                                <li>
                                    <span rel="tooltip" data-placement="top" data-original-title="Yahoo">
                                     <a href="javascript:void(0);" data-type="yahoo"
                                        class="btn bg-color-blueLight btn-circle openid-login"><i
                                             class="fa fa-yahoo"></i></a>
                                    </span>
                                </li>
                                <li>
                                    <span rel="tooltip" data-placement="right"
                                          data-original-title="Hotmail">
                                     <a href="javascript:void(0);" data-type="hotmail"
                                        class="btn bg-color-teal btn-circle openid-login"><i
                                             class="fa fa-skyatlas"></i></a>
                                    </span>
                                </li>
                                <li>
                                    <span rel="tooltip" data-placement="bottom"
                                          data-original-title="GitHub">
                                     <a href="javascript:void(0);" data-type="github"
                                        class="btn bg-color-magenta btn-circle openid-login"><i
                                             class="fa fa-github"></i></a>
                                    </span>
                                </li>
                                <li>
                                    <span rel="tooltip" data-placement="bottom"
                                          data-original-title="OsChina">
                                     <a href="javascript:void(0);" data-type="oschina"
                                        class="btn btn-success btn-circle openid-login"><i
                                             class="fa fa-codiepie"></i></a>
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>

            </div>
        </div>
    </div>

</div>

<!--================================================== -->

<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
<script src="/static/js/plugin/pace/pace.js"></script>

<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="/static/js/libs/jquery-2.2.0.js"></script>

<script src="/static/js/libs/jquery-ui-1.11.4.js"></script>

<!-- IMPORTANT: APP CONFIG -->
<script src="/static/js/app.config.js"></script>

<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
<script src="/static/js/plugin/jquery-touch/jquery.ui.touch-punch.js"></script> -->

<!-- BOOTSTRAP JS -->
<script src="/static/js/bootstrap/bootstrap.js"></script>

<!-- JQUERY VALIDATE -->
<script src="/static/js/plugin/jquery-validate/jquery.validate.js"></script>

<!-- JQUERY MASKED INPUT -->
<script src="/static/js/plugin/masked-input/jquery.maskedinput.js"></script>

<!-- Form Valisation dependency -->
<script src="/static/js/plugin/jquery-form/jquery.form.js"></script>

<!-- MD5 used in password-->
<script src="/static/js/plugin/md5/md5.js"></script>

<!--[if IE 8]>

<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

<![endif]-->

<!-- MAIN APP JS FILE -->
<script src="/static/js/app.js"></script>

<!-- myself define method.-->
<script src="/static/js/framework.js"></script>

<script type="text/javascript">
    runAllForms();

    $(function () {
        // Validation
        var $loginFrom = $("#login-form");
        $loginFrom.validate({
            // Rules for form validation
            rules: {
                username: {
                    required: true,
                    minlength: 4,
                    maxlength: 20
                },
                password: {
                    required: true,
                    minlength: 3,
                    maxlength: 32
                }
            },

            // Messages for form validation
            messages: {
                username: {
                    required: 'Please enter your username'
                },
                password: {
                    required: 'Please enter your password'
                }
            },

            /**
             // Ajax form submition
             submitHandler: function (form) {
                $(form).ajaxSubmit({

                    beforeSerialize: function () {
                        // md5 password
                        var $password = $("input[name='password']");
                        $password.val(md5($password.val()));
                    },

                    beforeSubmit: function (formData, jqForm, options) {
                        // formData is an array; here we use $.param to convert it to a string to display it
                        // but the form plugin does this for you automatically when it submits the data
                        var queryString = $.param(formData);
                        console.info(queryString)
                    }
                });
            },
             */

            // Do not change code below
            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());
            }
        });

        // 密码回显
        password_feedback($loginFrom);

        // 回车登录
        $('body').on('keyup', function (event) {
            if (event.keyCode == 13) {
                $('#login').click();
            }
        });

        // md5 password
        $loginFrom.submit(function () {
            var $password = $("input[name='password']");
            $password.val(md5($password.val()));
        });

        // 信息提示
        setTimeout(function () {
            // 让提示框等待4秒后再消失
            $('#messageBox').fadeOut(1000);
        }, 3000);

        // 第三方登录
        $('.openid-login').on('click', function () {
            var type = $(this).data('type');
            // 转向网页的地址
            var url = "${ctx}/common/openid/beforeLogin?type=" + type;
            var name = 'loginPage'; // 网页名称，可为空;
            var width = 800; // 弹出窗口的宽度
            var height = 600; // 弹出窗口的高度
            var top = (window.screen.availHeight - 30 - height) / 2; // 获得窗口的垂直位置;
            var left = (window.screen.availWidth - 10 - width) / 2; // 获得窗口的水平位置;
            window.open(url, name,
                    'height='
                    + height
                    + ',innerHeight='
                    + height
                    + ',width='
                    + width
                    + ',innerWidth='
                    + width
                    + ',top='
                    + top
                    + ',left='
                    + left
                    + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
        });
    });

    // 如果在框架中,则跳转刷新上级页面
    if (self.frameElement && self.frameElement.tagName == "IFRAME") {
        parent.location.reload();
    }

</script>

</body>
</html>